<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3d播放器制作</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: url(../files/jacky/bg.jpg) no-repeat;
				
			
			/*css3新增 使的背景图片全屏*/
			background-size: cover;
			 /*防止红心运动出界后出现滚动条*/
			 overflow:hidden;
			}
		
			ul {
				width: 200px;
				height: 200px;
			/*	background-color: red;*/
				/*绝对定位*/
				position: absolute;
				bottom: 100px;/*离地部永远100px*/
				left: 50%;/*水平永远居中*/
				/*靠右边一些好看*/
					margin-left: 200px;
					/*想要水平居中必须左移宽度的一半*/
			/*	margin-left: -100px;*/
			transform-style: preserve-3d;
			/*此处会被动画覆盖掉无效》移动到动画处*/
			/*transform: rotateX(-11deg);*/
			
			
				/*动画*/
			animation: move 12s linear 0s infinite normal;
			
	
			}
			ul:hover{
				animation-play-state: paused;
			}
		ul li{
			list-style: none;
			width: 200px;
			height: 200px;
			font-size: 60px;
			text-align: center;
			line-height: 200px;
			position: absolute;
			top: 0;
			left: 0;
			
			/*img的父元素*/
				background-color: black;
			}
			ul li:nth-child(1){
				/*background-color:blue ;*/
				transform: rotateY(60deg) translateZ(200px);
			}
				ul li:nth-child(2){
				/*background-color:yellow ;*/
					transform: rotateY(120deg) translateZ(200px);
			}
				ul li:nth-child(3){
			/*	background-color: pink;*/
					transform: rotateY(180deg) translateZ(200px);
			}
				ul li:nth-child(4){
			/*	background-color: purple;*/
				transform: rotateY(240deg) translateZ(200px);
			}
				ul li:nth-child(5){
				/*background-color: goldenrod;*/
					transform: rotateY(300deg) translateZ(200px);
			}
				ul li:nth-child(6){
				/*background-color: green;*/
					transform: rotateY(360deg) translateZ(200px);
			}
			ul li img{
				width: 200px;
				height: 200px;
				border: 3px solid skyblue;
				box-sizing: border-box;
				
			}
			/*透明度 蒙版效果*/
			ul:hover li img{
				opacity: 0.3;
			
			}
			ul li:hover img{
				opacity: 1;
				
				
			}
			@keyframes move{
				/*动画中固定不变的值要写在前面*/
				from{transform: rotateX(-11deg) rotateY(0deg);}
				to{transform: rotateX(-11deg) rotateY(360deg);}
			}
			/*心*/
			.heart{
				height: 157px;
				width: 173px;
				/*绝对定位*/
				position: absolute;
				bottom: 5%;
				left: 5%;
				/*动画*/
				animation: sport 8s linear 0s infinite ;
				
			}
			@keyframes sport{
			0%{
				left: 5%;
				bottom: 5%;
				opacity: 1;
			}
			15%{
				left: 25%;
				bottom: 35%;
				opacity: 0.5;
			}
			30%{
				left: 40%;
				bottom: 65%;
				opacity: 1;
			}
			45%{
				left: 50%;
				bottom: 83%;
				opacity: 0;
			}
			60%{
				left: 65%;
				bottom: 65%;
				opacity: 1;
			}
				75%{
				left: 90%;
				bottom: 40%;
				opacity: 0.3;
			}
			90%{
				left: 45%;
				bottom: 20%;
				opacity: 1;
			}
			100%{
				left: 5%;
				bottom: 5%;
				opacity: 1;
			}
			
			}
			audio{
				margin: 0 auto;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		
		<ul>
		<!--	<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>-->
			<li><img src="../files/jacky/1.png"></li>
			<li><img src="../files/jacky/2.jpg"></li>
			<li><img src="../files/jacky/3.jpg"></li>
			<li><img src="../files/jacky/4.gif"></li>
			<li><img src="../files/jacky/5.jpg"></li>
			<li><img src="../files/jacky/6.jpg"></li>
		</ul>
		<img src="../files/jacky/xin.png"  class="heart"/>
		<audio src="../files/jacky/我醒着做梦.mp3" controls="controls" autoplay="autoplay"
			loop="loop"></audio>
	</body>
</html>
